<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			/* 抓div元素 心主体 */
			div{
				width: 200px;
				height: 200px;
				background-color: #e4393c;
				/* 自适应居中 */
				margin:250px auto;
				/* 旋转 */
			    transform: rotate(135deg);
				/* 透明度属性：属性值 0~1 范围值 */
				opacity: .7;
				/* 滤镜属性：光晕：下阴影 */
				filter: drop-shadow(0 0 50px #ff0000);
				/* 动画属性:关键帧名称 过渡时间 过渡方式(linear匀速) 无限循环 */
				animation: heart .8s linear infinite;
			
			}
			/* ③伪类选择器：给元素附加上效果的选择器 
			   语法：div:hover{}  当鼠标悬停到div上 实现的【样式】效果
			   需求：鼠标悬停到中间心位置改成圆
			   选择器:before 在元素之前添加文本，通常与content:""
			   选择器:after 在元素之后添加文本，通常与content:""
			*/
		   /* 伪类选择器div上方增加文本/画圆 */
		   div:before{
			   content: "";/* 行转块 */
			   /* 显示属性
			   display:block;转成块级元素
			   display:inline;转成行级元素
			   display:none;元素消失
			   */
			   display: block;
			   width: 200px;
			   height: 200px;
			   background-color: #e4393c;
			   border-radius: 50%;
			   /* 相对定位 */
			   position: relative;
			   left: -100px;
		   }
		   div:after{
			   content: "";
			   display: block;
			   width: 200px;
			   height: 200px;
			   background-color: #e4393c;
			   border-radius: 50%;
			   position: relative;
			   top: -100px;
			   
		   }
		   /* -----------------动画-------------------*/
		   /* 1.创建关键帧--手翻书*/
		   @keyframes heart{
			   /* 3个画面:①等比例出现，防止跳帧 ②缩小比例 ③放大比例*/
			   0%{
				   /* 转换属性：缩放属性值
					  1代表等比例  
					  .8代表缩小0.8倍
					  1.2代表放大1.2倍
					  transform复合属性： 旋转 缩放
					  */
				   transform: rotate(135deg) scale(1);
			   }
			   30%{
				   transform: rotate(135deg) scale(.8);
			   }
			   100%{
				   transform: rotate(135deg) scale(1.2);
			   }
		   }
		</style>
	</head>
	<body>
		<!-- 画一颗心  html 1个元素-->
		<div></div>
		<!-- html5：元素的分类：按照元素的特点分为：
		           ①块元素：可以设置高宽、独占一行  典型块元素：div
				   ②行元素：不可以设置高宽、可以在一行内显示  典型行元素：span
				          文本内容属于行元素
				   ③行内快元素：可以设置高宽、可以在一行内显示  典型行内块元素：img
		 -->
		<!-- 音乐  老火狐-->
		<audio src="renxi.mp3"autoplay loop></audio>
	</body>
</html>